<template>
  <div class="dynamic_table_item" >
    <template v-if="props.question.type === 'number'">
      <a-input-number v-model:value="localValue" :disabled="isDisabled()" :max="props.question.state.maxlength || null" :placeholder="props.question.placeholder || '请输入'" allowClear @blur="blurEvent">
        <template #addonAfter v-if="props.question.state.addonAfter">
          <a-form-item-rest>
            <a-select v-model:value="props.question.state.extendParams[props.question.state.addonAfter.key]" v-if="props.question.state.addonAfter.tagType === 'select'">
              <a-select-option v-for="item in props.question.state.addonAfter.options" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-input v-else v-model:value="props.question.state.extendParams[props.question.state.addonAfter.key]" :disabled="props.question.state.addonAfter.disabled" :placeholder="props.question.state.addonAfter.placeholder || '请输入'" allowClear  />
          </a-form-item-rest>
        </template> 
      </a-input-number>
    </template>
    <template v-else-if="props.question.type === 'textarea'">
      <a-textarea v-model:value="localValue" :disabled="isDisabled()" :placeholder="props.question.placeholder || '请输入'"  :maxlength="props.question.state.maxlength || 9999" :auto-size="{ minRows: 3, maxRows: 3 }" />
    </template>
    <template v-else>
      <a-input v-model:value="localValue" :disabled="isDisabled()" :placeholder="props.question.placeholder || '请输入'" allowClear @blur="blurEvent" >
        <template #addonAfter v-if="props.question.state.addonAfter">
          <a-form-item-rest>
            <a-select v-model:value="props.question.state.extendParams[props.question.state.addonAfter.key]" v-if="props.question.state.addonAfter.tagType === 'select'">
              <a-select-option v-for="item in props.question.state.addonAfter.options" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-input v-else v-model:value="props.question.state.extendParams[props.question.state.addonAfter.key]" :disabled="props.question.state.addonAfter.disabled" :placeholder="props.question.state.addonAfter.placeholder || '请输入'" allowClear  />
          </a-form-item-rest>
        </template> 
      </a-input>
    </template>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue';
import { formInfoStore } from '@/store/modules/form';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { INFOSERVE,TABLEEVENTSERVE } from '@/mixins/subject/subject-types';
import localDictionary from "@/filters/dictionary";
import { QuestionBase } from '@/components/public-template/DynamicForm/question-base';
import { isHidden } from '@/utils';
//subject变量
let $subscribeSub: Subscription;

const { proxy }: any = getCurrentInstance();
let props = defineProps<{ question: any; formData: any ;dataForm?:any;index?:number}>();
const emit = defineEmits(['update:formData','parentServe']);

const localValue = ref(null);

watch(
  () => localValue.value,
  (val) => {
    emit('update:formData', val);
  },
  { flush: 'sync' }
);
watch(
  () => props.formData,
  (val) => {
    if( props.formData !==  localValue.value){
      localValue.value = props.formData;
    }
  },
  { flush: 'sync' }
);

onMounted(() => {
  init();
});

//解绑
onUnmounted(() => {
  if ($subscribeSub != undefined) {
    $subscribeSub.unsubscribe();
  }
});

//是否禁用
const isDisabled = ()=>{
  let disabled:boolean = false;
  if( Array.isArray(props.question.disabled)){
    disabled = isHidden(props.dataForm, { showKey: props.question.disabled });
    if( props.question.invertDisabled ){
      disabled = !disabled;
    }
  }else if( typeof props.question.disabled === 'boolean'  ){
    return props.question.disabled
  }
  return disabled
}

//失去焦点事件
const blurEvent = () =>{
  proxy.$NotificationPubSub.pushParams({
    key: TABLEEVENTSERVE,
    value: {
      key: props.question.key,
      value: localValue.value,
      index: props.index,
      data: props.dataForm,
      name: props.question.state.name || props.question.name
    }
  });
  
}


//初始化后缀的对应的值
const initAddonAfterLabel = () => {
  if(props.question.state.extendParams[props.question.state.addonAfter.key] !== undefined){
    let obj:any = props.question.state.addonAfter.options.find((res)=>res.value === props.question.state.extendParams[props.question.state.addonAfter.key]);
    console.log('aaaa',props.question);
    props.question.state.addonAfter.text = obj ? obj.label : '';
  }
}

const init = () => {
  localValue.value = props.formData;
  //组合类型
  if( props.question.state.addonAfter ){
    if( props.question.state.addonAfter.type === 'dictionary' ){
      const formStore = formInfoStore();
      let dictionary = formStore.getDictionary;
      let dicObj: any = dictionary[ props.question.state.addonAfter.filterName] || localDictionary[props.question.state.addonAfter.filterName];
      let arr: any = [];
      for (const key in dicObj) {
        if (dicObj.hasOwnProperty(+key)) {
          arr.push({
            label: dicObj[key],
            value:  props.question.state.addonAfter?.valueType === 'string' ? key + '' : +key
          });
        }
      }
      props.question.state.addonAfter.options = arr;
      //初始化后缀的对应的值
      initAddonAfterLabel();
    }else if (props.question.state.addonAfter.url) {
      let params = Object.assign({},props.question.state.addonAfter.params || {});
      proxy.$Http.api(props.question.state.addonAfter.url, params, props.question.state.addonAfter.protType ? props.question.state.addonAfter.protType : 'get').then((res) => {
        if (res) {
        // // 递归children
        const state = props.question.state.addonAfter;
          function reData(list: any[]) {
            if( !list ){
              return []
            }
            return list.map((data: any) => {
              const item: any =  {...data, label: data[state.nameKey], value: data[state.nameValue]+''} ;
              if (data[state.nameChildren] && data[state.nameChildren].length > 0) {
                item.children = reData(data[state.nameChildren]);
              }
              return item;
            });
          }
          props.question.state.addonAfter.options = reData(res.data);
          //初始化后缀的对应的值
          initAddonAfterLabel();
        }
      });
    }
  }
};

</script>

<style lang="less" scoped>
@import url('./input-item.component.less');
</style>
